<template>
  <el-row :gutter="20">
    <el-col :span="3" :offset="0"
      ><img height="50" :src="logo" @click="$router.push('/home')"
    /></el-col>
    <el-col :span="17" :offset="0">
      <el-page-header @back="goBack">
        <template #content>
          <span class="title-class"> {{ $route.meta.title }} </span>
          <span class="desc-class"> {{ $route.meta.desc }} </span>
        </template>
      </el-page-header></el-col
    >
    <el-col :span="2" :offset="0">
      <RouterLink to="/notice">
        <el-badge
          class="notice-badge"
          :value="unReadNoticeList.length"
          :max="10"
          :hidden="unReadNoticeList.length === 0"
          type="danger"
        >
          <el-button size="small" :icon="Bell">未读消息</el-button>
        </el-badge>
      </RouterLink>
    </el-col>
    <el-col :span="1" :offset="0">
      <el-dropdown size="default">
        <el-avatar
          icon="el-icon-user-solid"
          size="default"
          shape="circle"
          :src="avatar"
          fit="fill"
        ></el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="gotoUser"> 个人信息 </el-dropdown-item>
            <el-dropdown-item @click="logout"> 退出登录 </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Bell } from "@element-plus/icons-vue";
import { useSunnyNoticeStore } from "@/stores/NoticeStore";
//未读消息通知实现
import SockJS from "sockjs-client";
import Stomp from "stompjs";
import { storeToRefs } from "pinia";
import { logoutApi } from "@/api/sunnyuser";
import { localStorage } from "@/api/storage";
import { useUserStore } from "@/stores/userStore";
import { useModuleStore } from "@/stores/sunnyModuleStore";
import { useProjectStore } from "@/stores/sunnyProjectStore";
const userStore = useUserStore();
const { sunnyUser, avatar } = storeToRefs(userStore);
const logo = ref(new URL("@/assets/img/logo.png", import.meta.url).href);

const router = useRouter();
const route = useRoute();
function goBack() {
  router.back();
}

let stompClient: Stomp.Client;

const noticeStore = useSunnyNoticeStore();
const projectStore = useProjectStore();
const moduleStore = useModuleStore();

const { noticeList } = storeToRefs(noticeStore);

const unReadNoticeList = computed(() => {
  return noticeList.value.filter((notice) => !notice.isRead);
});

onMounted(() => {
  userStore.getUser();
  noticeStore.listNotices();
  subscribe();
});

function subscribe() {
  //创建sockjs连接端点
  var socket = new SockJS("http://localhost:18080/sunnyWebSocket");
  //创建一个客户端
  stompClient = Stomp.over(socket);
  //完成连接
  stompClient.connect({}, function (frame) {
    console.log("Connected: " + frame);
    //进行订阅
    stompClient.subscribe(
      "/topic/notice",
      //回调函数，对拿到的信息如何处理
      function (response) {
        //将收到的消息弹出显示
        // let newNotice = JSON.parse(response.body) as SunnyNotice;
        // ElMessage.info("收到新消息：" + newNotice.notice);
        //收到新消息需要更新当前的消息列表
        noticeStore.listNotices();
        // //不是run路由的时候，刷新界面，不推荐
        // if (route.name?.toString().indexOf("run") === -1) {
        //   location.reload();
        // }
        //同时刷新模块和项目的信息
        projectStore.listProjects();
        moduleStore.listModules();
      }
    );
  });
}

function disconnect() {
  if (stompClient !== null) {
    stompClient.disconnect(() => {
      console.log("已断开连接");
    });
  }
  console.log("Disconnected");
}

onUnmounted(() => {
  disconnect();
});

function logout() {
  logoutApi().then(() => {
    localStorage.remove("token");
    router.push({ name: "login" });
  });
}

function gotoUser() {
  router.push({ name: "user" });
}
</script>

<style scoped>
.el-page-header {
  position: fixed;
  left: 150px;
  margin-top: 10px;
}

.title-class {
  font-size: 16px;
  margin-right: 20px;
  font-weight: bolder;
}

.desc-class {
  font-size: 14px;
  color: #73767a;
}

.notice-badge {
  position: relative;
  top: 10px;
}
</style>
